<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东问答</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span>我要提问</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>生活用品</option><option>电子产品</option><option>儿童玩具</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>

<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        $("span").click(function(){
            $(".post").fadeIn();
            // 清空上一次数据
            $(".title").val("");
            $("select").val("");
            $(".content").val("");
        })

        //头像数组  4个长度
        var arr = new Array();
        arr[0] = "tou01.jpg";
        arr[1] = "tou02.jpg";
        arr[2] = "tou03.jpg";
        arr[3] = "tou04.jpg";
        
        $(".btn").click(function(){
            // 获取随机数，范围在0-3
            var index = Math.floor(Math.random()*4);  // 3.99999999
            var title_new = $(".title").val();
            var mokuai_new = $("select").val();
            var date = new Date().toLocaleString(); // 格式化日期
            var str = `<li>
                            <div>
                                <img src="./images/${arr[index]}" alt="">
                            </div>
                            <h1>${title_new}</h1>
                            <p>模块：${mokuai_new}
                                <span>发表时间:${date}</span>
                            </p>
                        </li>`;
            // $(str) 把字符串转变为jquery节点对象
            $("ul").prepend($(str));
            $(".post").fadeOut();
        })
    })
</script>
</body>
</html>